<template>
<div class='container'>
     <van-cell  
     size="large" 
     is-link 
     @click="toOrderInfo(item)"
     v-for="item in orderLists"
    :key="item.id"
     >
        <template #title>
          <div class="text-image">
            <img :src="item.logo" alt="" class="img-align">
            <div class="right-text">
              <span class="custom-title">{{item.platform}}</span>
              <span class="custom-title">{{item.date}}</span>
            </div>
          </div>
        </template>
        <template #default>
          <span class="rightText" :class="{rightTextWin:item.state.startsWith('+')}">{{item.state}}</span>
        </template>
      </van-cell>
</div>
</template>

<script>
import orderlist from '@/api/constant/order'
export default {
    name:'OrderList',
    props:{
      orderType:{
        default:'all'
      }
    },
    data(){
        return {
            // orderDate:this.$dayjs(new Date()).format('YYYY-MM-DD hh:mm:ss'),
            orderList:orderlist.orderList
        }
    },
    methods:{
        toOrderInfo(item) {
          this.$emit('toOrderInfo',item)
        },
        toOrderInfoED(){
          this.$emit('toOrderInfoED')
        }
    },
    computed:{
      orderLists(){
        if(this.orderType==='notFinished'){
          return this.orderList.filter(item=>item.state==='未出单')
        }else if(this.orderType==='finished'){
          return this.orderList.filter(item=>item.state==='已出单')
        }else if(this.orderType==='profitOrder'){
          return this.orderList.filter(item=>item.state.startsWith('+'))
        }else if(this.orderType==='Amazon'){
          return this.orderList.filter(item=>item.platform==='Amazon')
        }else if(this.orderType==='eBay'){
          return this.orderList.filter(item=>item.platform==='eBay')
        }else if(this.orderType==='Target'){
          return this.orderList.filter(item=>item.platform==='Target')
        }else if(this.orderType==='BestBuy'){
          return this.orderList.filter(item=>item.platform==='BestBuy')
        }else if(this.orderType==='Walmart'){
          return this.orderList.filter(item=>item.platform==='Walmart')
        }else if(this.orderType==='IKEA'){
          return this.orderList.filter(item=>item.platform==='IKEA')
        }else if(this.orderType==='NetFlix'){
          return this.orderList.filter(item=>item.platform==='NetFlix')
        }else if(this.orderType==='Newegg'){
          return this.orderList.filter(item=>item.platform==='Newegg')
        }else if(this.orderType==='Sears'){
          return this.orderList.filter(item=>item.platform==='Sears')
        }else if(this.orderType==='3days'){
          return this.orderList.filter(item=>{
           return  new Date().getDate() - new Date(item.date).getDate() <=3 && new Date().getFullYear() == new Date(item.date).getFullYear() && new Date().getMonth() == new Date(item.date).getMonth()
          })
        }else if(this.orderType==='7days'){
          return this.orderList.filter(item=>{
           return  new Date().getDate() - new Date(item.date).getDate() <=7 && new Date().getFullYear() == new Date(item.date).getFullYear() && new Date().getMonth() == new Date(item.date).getMonth()
          })
        }else if(this.orderType==='oneMonth'){
          return this.orderList.filter(item=>{
           return   new Date().getFullYear() == new Date(item.date).getFullYear() && new Date().getMonth() - new Date(item.date).getMonth() == 1
          })
        }else{
          return this.orderList
        }
      }
    }
}
</script>
<style scoped lang="less">
.container{
    .text-image{
       display: flex;
       align-items: center;
       .img-align{
          margin-right: 20px;
          vertical-align: middle;
       }
       .right-text{
          display: flex;
          flex-direction: column;
          .custom-title{
            font-size: 28px;
          }
       }
    }
    .rightText{
      font-weight: 600;
      font-size: 30px;
      color: #323233;
    }
    .rightTextWin{
      font-size: 34px;
      color: #F56C7D;
    }
    .van-cell__title{
      flex:2;
    }
    .van-cell__value {
    line-height: 74px;
    }
    .van-cell {
        display: flex;
        align-items: center;
    }
    
}
</style>